<template>
	<view class="container">
		<view class="nav-section">
			<image src="../../static/bg.png" class="bg" />
			<view class="nav-title">
				<image @click="back()" src="../../static/back.png"></image>
				<text class="title">专属活动</text>
			</view>
			<view class="act-img">
				<image :src="info.pcImgPath" mode="aspectFill" />
			</view>
		</view>
		<view class="act-time">
			<image src="../../static/time-bg.png" />
			<view class="t-time">
				<text>{{info.startAt+' '}}至{{' '+info.endAt}}</text>
			</view>
		</view>
		<view class="exp-area">
			<text class="yticon icon-bangzhu1"></text>
			<view class="exp">活动说明：限积分支付。仅支持纯积分结算购买。</view>
		</view>
		<view class="p-area">
			<image src="../../static/rect.png" class="bg" />
			<view class="a-title">
				<image src="../../static/act.png"></image>
				<text class="tit">{{info.name}}</text>
				<text class="desc">{{info.description}}</text>
			</view>
		</view>
		<view v-if="hasLogin">
			<view class="p-list">
				<view class="p-item" v-for="(item,index) in productList" :key="index" @click="navToDetailPage(item)">
					<image class="image-wrapper" :src="item.goodsImage" mode="aspectFit" @error="item.goodsImage=errorImgUrl"></image>
					<view class="item-right">
						<view class="title more-t">{{item.goodsTip}}</view>
						<view class="supplier">{{item.supplierName}}</view>
						<view class="bottom">
							<view class="price">{{item.goodsPrice}}积分</view>
							<view class="btn" @click.stop="addCart(item)">加入购物车</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<view class="p-list" v-else>
			<image src="../../static/smile.png"></image>
			<view class="hint">
				<text>登录后查看活动商品</text>
				<text style="color: #1890ff;margin-left: 10rpx;" @click="toLogin">去登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		errorImgUrl
	} from '@/common/utils/config.js';
	import {
		addToCart
	} from '../../api/cart/cart.js'
	import {
		getActivityInfo,
		getActivityProducts
	} from '../../api/activity/activity.js'
	import {
		mapState
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				info: {},
				productList: [],
				loadingType: 'more', //加载更多状态
				page: 0,
				errorImgUrl: errorImgUrl,
				areaId: '',
				targetId: '',
			};
		},
		onLoad(option) {
			let id = option.id || '';
			this.targetId = option.targetId || '';
			if (id !== '') {
				this.getInfo(id)
			}
			if (this.targetId !== '' && this.hasLogin) {
				this.getProducts(this.targetId)
			}
		},
		//加载更多
		onReachBottom() {
			if (this.loadingType === 'nomore' || this.loadingType === 'loading') {
				return;
			}
			if (this.targetId !== '' && this.hasLogin) {
				this.getProducts(this.targetId);
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			getInfo(id) {
				const params = {
					id: id
				}
				getActivityInfo(params).then(res => {
					if (res.code === 0) {
						this.info = res.data
					}
				})
			},
			// 详情
			navToDetailPage(item) {
				let id = item.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			getProducts(targetId) {
				this.loadingType = 'loading'
				this.page += 1;
				const params = {
					brandIds: [],
					includeTags: [targetId],
					isStandard: -1,
					limit: 7,
					page: this.page,
					purchaserCatalogIds: [],
					purchaserId: uni.getStorageSync('deptinfo')[0].deptId,
					sortType: 1,
					specList: []
				}
				getActivityProducts(params).then(res => {
					if (res.code === 0) {
						this.productList = this.productList.concat(res.data.goodsList)
						this.areaId = res.data.areaId
						let total = res.data.total
						this.loadingType = this.productList.length < total ? 'more' : 'nomore';
					}
				})
			},
			// back() {
			// 	// uni.navigateBack()
			// },
			back() {   
                // #ifdef H5  
                let canBack = true  
                const pages = getCurrentPages()  
                // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回  
                if (pages.length > 1) {  
                    uni.navigateBack(1)  
                    return;  
                }  
                // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载  
                let a = this.$router.go(-1)  
                // router.go失败之后则重定向到首页  
                if (a == undefined) {  
                    uni.reLaunch({  
                        url: "/pages/index/index"  
                    })  
                }  
                return;  
                // #endif  
                uni.navigateBack(1)  
            },
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			addCart(item) {
				let pType;
				let qType;
				if (item.goodsSourceType === 0) {
					pType = '02';
					qType = 1;
				} else {
					pType = '01';
					qType = 2;
				}
				const good = {
					protocolGoodsId: item.goodsId,
					protocolId: item.protocolId,
					protocolType: pType,
					remainAmount: 1
				}
				const params = {
					areaId: this.areaId || uni.getStorageSync('areaId'),
					bizDeptId: uni.getStorageSync('deptinfo')[0].deptId,
					goods: [good],
					isqueryAmount: true,
					queryType: qType
				}
				addToCart(params).then(res => {
					if (res.code === 0) {
						this.$util.msg('加入购物车成功')
					} else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					}else {
						this.$util.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: #f5f5f5;
		height: 100%;
	}

	.nav-section {
		height: 400upx;
		position: relative;
		text-align: center;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.nav-title {
		position: fixed;
		left: 0;
		width: 100%;
		top: calc(var(--window-top) + var(--status-bar-height));
		height: 48px;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: center;

		.title {
			color: #fff;
			font-size: 17px;
		}

		image {
			position: absolute;
			left: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.act-img {
		position: absolute;
		margin-top: calc(var(--window-top) + var(--status-bar-height) + 55px);
		margin-left: 0;
		padding: 0 20rpx;
		width: 100%;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 300rpx;
		}
	}

	.act-time {
		margin: 20rpx 20rpx 10rpx 20rpx;
		position: relative;
		text-align: center;

		image {
			width: 100%;
			height: 44px;
		}

		.t-time {
			position: absolute;
			height: 44px;
			right: 40rpx;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				margin: auto;
				color: $base-color;
				font-size: 13px;
			}
		}
	}

	.exp-area {
		margin-left: 20rpx;
		font-size: 13px;
		text-align: left;

		.icon-bangzhu1 {
			padding: 4rpx;
			font-size: 26rpx;
			line-height: 1;
			display: inline;
		}


		.exp {
			display: inline;
			color: #909399;
		}

	}

	.p-area {
		margin: 20rpx;
		position: relative;
		padding-left: 20rpx;
		padding-right: 20rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 60px;
		}
	}


	.a-title {
		height: 60px;
		width: 100%;
		padding-right: 40rpx;
		position: absolute;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.tit {
			flex: 1;
			color: #8a5807;
			font-size: 17px;
			margin-right: 30rpx;
			// width: 30%;
		}

		.desc {
			flex: 1;
			text-align: right;
			// right: 40rpx;
			// position: absolute;
			color: #fff;
			font-size: 14px;
		}
	}

	.p-list {
		width: 100%;
		margin-top: 60px;
		padding: 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			margin-top: 20rpx;
			width: 60rpx;
			height: 60rpx;
		}

		.hint {
			margin-top: 20rpx;
			display: flex;

			text {
				font-size: 14px;
			}
		}

		.p-item {
			display: flex;
			width: 100%;
			margin-bottom: 16rpx;
			justify-content: space-between;
			border-radius: 10rpx;
			background: #fff;

			.image-wrapper {
				width: 120px;
				height: 120px;
				flex-shrink: 0;
				background-color: #fff;
				border-radius: 8upx;
			}

			.item-right {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;
				justify-content: space-between;
				position: relative;
				padding: 16rpx 20upx;

				.title {
					width: 100%;
					color: $font-color-dark;
					font-size: $font-base;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}

				/*多行文本溢出省略号*/
				.more-t {
					overflow: hidden; // 超出的文本隐藏
					text-overflow: ellipsis; // 溢出用省略号显示
					display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
					-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
					-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					transition: all linear 0.2s;
				}

				.supplier {
					font-size: 13px;
					color: #666ff7;
					border-radius: 8rpx;
					width: fit-content;
					padding: 6rpx 10rpx;
					background: linear-gradient(left, #eaddef, #d5daf7);
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					width: 100%;
					align-items: center;

					.price {
						font-size: $font-base + 6upx;
						// font-weight: bold;
						color: $uni-color-primary;
						height: 40upx;
						line-height: 40upx;
					}

					.btn {
						width: 90px;
						text-align: center;
						padding: 8rpx 12rpx;
						border-radius: 20px;
						color: $base-color;
						font-size: 13px;
						border: 1px solid $base-color;
					}
				}
			}
		}
	}
</style>
